<template>
  <div class="product">
    <el-collapse style="background-color:#fff;padding-bottom:10px;" class="margin-30">
      <el-collapse-item style="text-indent:5px;" title="商品管理介绍">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>

    <el-collapse style="background-color:#fff;padding-bottom:10px; margin:30px;">
      <el-collapse-item style="text-indent:5px;" title="条件查询">
        <el-form :model="searchForm" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="searchForm.name" placeholder="商品名称/模糊查询" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="商品货号">
                <el-input v-model="searchForm.productSn" placeholder="商品货号" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="品牌">
                <el-select v-model="searchForm.brandId" placeholder="品牌" clearable filterable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="上架状态">
                <!-- publishStatus (integer, optional): 上架状态，0->下架；1->上架 , -->
                <el-select v-model="searchForm.publishStatus" placeholder="上架状态" clearable filterable>
                  <el-option
                    label="未上架"
                    :value="0"
                  />
                  <el-option
                    label="上架"
                    :value="1"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="5" :offset="0">
              <el-form-item label="审核状态" size="mini">
                <!-- verifyStatus (integer, optional): 审核状态：0->未审核；1->审核通过 -->
                <el-select v-model="searchForm.verifyStatus" placeholder="审核状态" clearable filterable>
                  <el-option
                    label="审核"
                    :value="1"
                  />
                  <el-option
                    label="未审核"
                    :value="0"
                  />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="5" :offset="12" :push="2">
              <el-form-item>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <el-card class="margin-30" shadow="never">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goToProductDeatail('')">新增</el-button>
        <el-button type="primary" size="mini">导出商品excel文件</el-button>
      </div>

      <el-table :data="productLsit" border stripe>
        <el-table-column
          label="#"
          width="50"
          type="index"
          align="center"
        />

        <el-table-column
          label="商品图片"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <img width="100" height="100" :src="scope.row.pic">
          </template>
        </el-table-column>

        <el-table-column
          label="商品名称"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
            <div style="margin:15px 0;">品牌:{{ scope.row.brandName }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="商品价格"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <div>原价:{{ scope.row.price }}</div>
            <div style="margin:15px 0;">现价:{{ scope.row.originalPrice?scope.row.originalPrice:scope.row.price }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="商品类别"
          width="80"
          align="center"
          prop="productCategoryName"
        />

        <el-table-column
          label="标签"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <span style="margin-right:5px;">最新:</span>
              <el-switch v-model="scope.row.newStatus" size="mini" :active-value="1" :inactive-value="0" @change="changeNewStatus($event,scope.row.id,0)" />
            </div>
            <div style="margin-top:10px;">
              <span style="margin-right:5px;">推荐:</span>
              <el-switch v-model="scope.row.recommendStatus" size="mini" :active-value="1" :inactive-value="0" @change="changeNewStatus($event,scope.row.id,1)" />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="标签2"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <span style="margin-right:5px;">发布:</span>
              <el-switch v-model="scope.row.publishStatus" size="mini" :active-value="1" :inactive-value="0" @change="changeNewStatus($event,scope.row.id,2)" />
            </div>
            <div style="margin-top:10px;">
              <span style="margin-right:5px;">审核:</span>
              <el-switch v-model="scope.row.verifyStatus" size="mini" :active-value="1" :inactive-value="0" @change="changeNewStatus($event,scope.row.id,3)" />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="sku"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="updateSku(scope.row.id)">编辑sku</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="重量"
          width="80"
          align="center"
          prop="weight"
        />

        <el-table-column
          label="排序"
          width="80"
          align="center"
          prop="sort"
        />

        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goToProductDeatail(scope.row.id)">编辑</el-button>
            <el-button style="color:red;" type="text" size="mini" @click="deleteProduct(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top:10px;"
        :current-page="pagination.start"
        :page-sizes="pagination.sizes"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <updateSku ref="skuList" />
  </div>
</template>

<script>
import {
  productsByPage as productsByPageApi,
  findAllBrand as findAllBrandApi,
  del as delApi,
  switchNewStatus as switchNewStatusApi,
  switchRecommandStatus as switchRecommandStatusApi,
  switchPublishStatus as switchPublishStatusApi,
  switchVerifyStatus as switchVerifyStatusApi
} from '@/api/product/list'
import updateSku from '@/views/product/productList/updateSku'
import mix from '@/mixin'
export default {
  name: 'ProductList',
  components: {
    updateSku
  },
  mixins: [mix],
  data() {
    return {
      productLsit: [], // 商品列表
      searchForm: {}, // 表单搜索数据
      loading: true, // 表格加载动画
      brandList: [], // 品牌liibao
      apiList: [switchNewStatusApi, switchRecommandStatusApi, switchPublishStatusApi, switchVerifyStatusApi] // 0新品状态,1推荐状态,2发布状态,3审核状态
    }
  },
  created() {
    this.getBrandList()
    this.getProductLsit()
  },
  methods: {
    // 更新状态
    changeNewStatus(e, id, index) {
      var api = this.apiList[index]

      api({
        'productId': id,
        'status': e
      })
        .then(res => {
          const { message, success } = res
          if (success) {
            this.$message.success('更改状态成功！')
            this.getProductLsit()
          } else {
            this.$message.error(message)
          }
        })
    },
    // 修改sku
    updateSku(id) {
      this.$refs.skuList.showModal(id)
    },
    // 删除商品
    deleteProduct(id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delApi(id)
          .then(res => {
            console.log('删除结果', res)
            const { success, message } = res
            if (success) {
              this.$message.success('删除商品成功！')
              this.getProductLsit()
            } else {
              this.$message.error(message)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 跳转到新增商品或者修改商品页面
    goToProductDeatail(id) {
      this.$router.push({ name: 'ProductDetail', query: { productId: id }})
    },
    // 重置搜索表单
    resetForm() {
      this.searchForm = {}
      this.start = 1
      this.getProductLsit()
    },
    // 根据搜索获取列表
    search() {
      this.pagination.start = 1
      this.getProductLsit()
    },
    // 更改当前页数
    handleCurrentChange(e) {
      this.pagination.start = e
      this.getProductLsit()
    },
    // 更改limit，一页多少数据
    handleSizeChange(e) {
      this.pagination.limit = e
      this.pagination.start = 1
      this.getProductLsit()
    },
    // 获取品牌列表
    getBrandList() {
      findAllBrandApi()
        .then(res => {
          // console.log('品牌列表==>', res)
          const { message, data, success } = res
          if (success) {
            this.brandList = data.items
          } else {
            this.$message.error(message)
          }
        })
    },
    // 获取商品列表
    getProductLsit() {
      this.filterNullParamsObject(this.searchForm)
      var data = null
      this.loading = true
      if (this.passForm) {
        data = [this.pagination.start, this.pagination.limit, this.searchForm]
      } else {
        data = [this.pagination.start, this.pagination.limit]
      }
      productsByPageApi(...data)
        .then(res => {
          const { message, data, success } = res
          if (success) {
            this.productLsit = data.rows
            this.pagination.total = data.total
          } else {
            this.$message.error(message)
          }
          this.loading = false
        })
    }
  }
}
</script>

<style>

</style>
